<template>
  <Layout>
    <div class="wrapper">
      <div class="record-wrapper">
        <ul v-if="groupList.length !== 0">
          <li v-for="(group, index) in groupList" :key="index">
            <h3 class="date">
              {{beautify(group.title)}}
              <span>{{'支出:'+group.totalOut.toFixed(2)+'  收入:'+group.totalIn.toFixed(2)}}</span>
            </h3>
            <ul>
              <li class="record" v-for="item in group.items" :key="item.id">
              <span class="icon-wrapper" :class="item.type==='+'?'income':''">
                <Icon :name="item.tag.name" class="icon"></Icon>
              </span>
                <span>{{item.tag.text}}</span>
                <span class="note">{{item.notes}}</span>
                <span>{{`${item.type === '-'?'-':''}`+item.amount.toFixed(2)}}</span>
              </li>
            </ul>
          </li>
        </ul>
        <div v-else class="noResult">
          {{`-本月没有收支记录哦-`}}
        </div>
      </div>
      <router-link class="addRecord" to="/details/make_record">
        <Icon name="addRecord" class="addIcon"></Icon>
        记一笔
      </router-link>
    </div>
  </Layout>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import dayjs from 'dayjs';
  import clone from '@/lib/clone';

  @Component
  export default class Statistics extends Vue {
    beforeCreate() {
      this.$store.commit('initLayoutData');
      this.$store.commit('initRecordList');
      this.$store.commit('initTagList');
    }

    recordList = this.$store.state.recordList;

    get groupList() {
      const {recordList} = this;
      if (recordList.length === 0) return []

      const newRecordList = clone(recordList)
        .filter( (r: RecordItem) => r.createdAt!.startsWith(this.$store.state.layoutData.interval) )
        .sort((a: RecordItem, b: RecordItem) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());

      type Result = { title: string; items: RecordItem[]; totalIn: number; totalOut: number }[]
      const result: Result = []
      let inSum = 0;
      let outSum = 0;

      for (let i = 0; i < newRecordList.length; i++) {
        const len = result.length
        const record = newRecordList[i]
        if ((i !== 0) && (record.createdAt === result[len - 1].title)) {
          result[len - 1].items.push(record);
          (record.type==='-') && (result[len - 1].totalOut += record.amount);
          (record.type==='+') && (result[len - 1].totalIn += record.amount);
        } else {
          if(record.type === '-'){
            result.push({title: record.createdAt, items: [record], totalOut: record.amount, totalIn: 0.00 });
          } else if(record.type === '+'){
            result.push({title: record.createdAt, items: [record], totalOut: 0.00, totalIn: record.amount });
          }
        }
        (record.type==='-') && (outSum += record.amount);
        (record.type==='+') && (inSum += record.amount);
      }

      this.$store.state.layoutData.payoutSum = outSum
      this.$store.state.layoutData.incomeSum = inSum

      return result;
    }

    beautify(string: string) {
      const now = dayjs();
      const day = dayjs(string);
      if (day.isSame(now, 'day')) {
        return '今天';
      } else if (day.isSame(now.subtract(1, 'day'), 'day')) {
        return '昨天';
      } else if (day.isSame(now.subtract(2, 'day'), 'day')) {
        return '前天';
      } else if (day.isSame(now, 'year')) {
        return dayjs(string).format('M月D日');
      }

      return dayjs(string).format('YYYY年M月D日');
    }

  }
</script>

<style scoped lang="scss">
  @import "~@/assets/style/helper.scss";
  ::v-deep {
    .type-tabs-item {
      background: #c4c4c4;

      &.active {
        background: white;

        &::after {
          display: none;
        }
      }
    }

    .period-tabs-item {
      font-size: 16px;
      height: 48px;
    }
  }

  .wrapper{
    padding-bottom: 50px;
    > .record-wrapper{
      overflow: auto;
    }
    > .addRecord{
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 12px 0;
      background: white;
      text-align: center;
      color: #00A1E9;
      font-size: 16px;
      > .addIcon {
        width: 1em;
        height: 1em;
      }
    }
  }


  %item {
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
  }

  ul{
    background-color: white;
    >li > ul > li{
      margin-left: 10px;
    }
  }

  .date {
    color: #A1A1A1;
    font-size: 12px;
    border-bottom: 1px solid #E6E6E6;
    @extend %item;
  }

  .record {
    display: flex;
    align-items: center;
    background: white;
    border-bottom: 1px solid #E6E6E6;
    @extend %item;
    >.icon-wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 2em;
      height: 2em;
      border-radius: 50%;
      color: white;
      background-color: $color-highLight;
      margin-right: 10px;
      >.icon{
        width: 1.5em;
        height: 1.5em;
      }
    }
    >.income{
      background-color: #BABABA;
    }
  }

  .note {
    margin-right: auto;
    margin-left: 16px;
    color: #999999;
    overflow: hidden;
  }

  .noResult{
    color: #999;
    text-align: center;
    padding: 16px;
  }


</style>
